<template>
  <div class="app-container">
    <div>
      <div class="filter-container">
        <el-input
          v-model="listQuery.materialId"
          placeholder="物料编码"
          style="width: 25%;"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-input
          v-model="listQuery.materialName"
          placeholder="物料名称"
          style="width: 25%;"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-input
          v-model="listQuery.customerName"
          placeholder="客户名称"
          style="width: 25%;"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-input
          v-model="listQuery.customerId"
          placeholder="客户编码"
          style="width: 25%;"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-button-group
          style="width: 55%;">
          <el-button
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >搜索</el-button>
          <el-button
            class="filter-item"
            style="margin-left: 10px;"
            icon="el-icon-delete"
            plain
            @click="handleDelete"
          >删除</el-button>
          <wjf-upload
            class="filter-item"
            action="/api/priceimport/imports"
            accept=".xlsx,.xls"
            element-loading-text="正在导入！"
            :params="listQuery"
            :show-file-list="false"
            style="margin-left: 10px;display:inline-block"
            show-success-msg
            @success="handleImportSuccess"
          >
            <div slot="default">
              <el-button
                type="primary"
                icon="el-icon-upload2 is-under-line"
              >
                <wjf-svg-icon icon-class="file" />
                <span>导入中心价目表</span>
              </el-button>
            </div>
          </wjf-upload>
          <el-button
            :loading="downloadLoading"
            class="filter-item"
            style="margin-left: 10px;"
            type="danger"
            @click="handleExportForCen"
          >
            <wjf-svg-icon icon-class="excel" />
            导出</el-button>
          <el-link type="info" style="font-size:13px" @click="importTemplate">下载导入模板</el-link>
        </el-button-group>
      </div>

      <wjf-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        header-row-class-name="el-table-tj"
        tooltip-effect="dark"
        :columns="columns"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        @selection-change="selectionChange"
        @sort-change="sortChange"
      >
        <el-table-column type="selection" align="center" slot="selection" ></el-table-column>
        <template slot-scope="{scope:{row}}" slot="actions">
          <el-button
            type="primary"
            size="mini"
            plain
            icon="el-icon-edit"
            @click="handleUpdate(row)"
          >编辑</el-button>
          <el-button
            type="primary"
            size="mini"
            plain
            icon="el-icon-edit"
            @click="handleUpdate1(row)"
          >批量编辑</el-button>
        </template>
      </wjf-table>
      <wjf-pagination
        v-show="total>0"
        :total="total"
        :page.sync="listQuery.pageNum"
        :limit.sync="listQuery.pageSize"
        @pagination="getList"
      />
      <edit :id="editId" :visible="dialogFormVisible" :parent-id="editParentId" :company-id="listQuery.companyId" @closed="handlerClose" />
      <edit1 :id="editId1" :visible="dialogFormVisible1" :parent-id="editParentId1" :company-id="listQuery.companyId1" @closed="handlerClose1" />
    </div>
  </div>
</template>
<style>

</style>
<script>
import listCommon from '@/views/common/list'
import { importTemplate, selectCustomerClassification, exports } from '@/api/price/cenprice/index'
import edit from './components/edit'
import edit1 from './components/edit1'

export default {
  name: 'Cenprice',
  components: { edit, edit1 },
  mixins: [listCommon],
  data() {
    return {
      exportFileName: '',
      price: '',
      exportFileName1: '中心价目表模板.xlsx',
      showIsPicture: true,
      viewVisible: false,
      editParentId: '',
      editParentId1: '',
      editId1: '',
      dialogFormVisible1: false,
      file: {

      },
      viewProps: {
        width: '50%'
      },
      listQuery: {
        materialId: '',
        materialName: '',
        customerName: '',
        customerId: '',
        orderBy: 'material_id'
      },
      columns: [
        {
          label: '客户编码',
          key: 'customerId',
          width: 100,
          align: 'center'
        },
        {
          label: '客户名称',
          key: 'customerName',
          align: 'center'
        },
        {
          label: '物料编码',
          key: 'materialId',
          width: 200,
          align: 'center'
        },
        {
          label: '物料名称',
          key: 'materialName'
        },
        {
          label: '物料名称',
          key: 'materialName'
        },
        {
          label: '中心价格',
          key: 'cenPrice',
          width: 100
        },
        {
          label: '加减价格',
          key: 'jjprice',
          width: 100
        },
        {
          label: '客户价格',
          key: 'cusPrice',
          width: 100
        },
        {
          label: '促销价格',
          key: 'promotionPrice',
          width: 100
        },
        {
          label: '操作',
          key: 'actions',
          width: 250
        }
      ]
    }
  },
  methods: {
    handleViewClose() {
      this.viewVisible = false
    },
    handleImportSuccess(res) {
      this.handleFilter()
    },
    /** 下载模板操作 */
    importTemplate() {
      importTemplate().then(response => {
        const a = document.createElement('a')
        a.href = URL.createObjectURL(response)
        a.download = this.exportFileName1
        a.click()
        if (this.exprotCallback) {
          this.exprotCallback()
        }
      })
    },
    handleDelete() {
      console.log(this.selectionList)
      if (!this.selectionList || !this.selectionList.length) {
        this.$message.error('请至少选择一项')
        return
      }
      this.$confirm(
        '确定要删除吗？',
        '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          this.batchDelete()
        })
        .catch((e) => {

        })
    },
    batchDelete() {
      const { batchDelete } = this.api
      batchDelete({
        ids: this.selectionList.map(item => item.id)
      }).then(() => {
        this.handleFilter()
      })
    },
    handleExportForCen() {
      selectCustomerClassification(this.listQuery).then(response => {
        console.log(response)
        this.listQuery.count = response
        response.forEach((element, index) => {
          const datas = {
            customerId: element.customerIds
          }
          if (this.beforeExport) {
            this.beforeExport()
          }
          exports(datas).then(data => {
            const a = document.createElement('a')
            a.href = URL.createObjectURL(data)
            a.download = this.exportFileName
            if (element.price === '一般') {
              a.download = '一般客户价格表.xlsx'
            } else {
              a.download = '特殊客户价格表.xlsx'
            }
            a.click()
            if (this.exprotCallback) {
              this.exprotCallback()
            }
          })
        })
      })
    }
  }
}
</script>
